<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>  
@keyframes typing {
    from { width: 0}
}
@keyframes blink-caret {
    50% { border-color: transparent; }
}
 
.typeing {
    font: 200% monospace;
    font-size: 15px;
    font-family: "楷体";
    border-right: .08em solid;
    width: 10ch;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 2s steps(12, end),
               blink-caret .5s step-end infinite alternate; //这里的alternate是为了让光标闪烁的正常一点
}
</style>
</head>
<body><p class="typeing">这里是小夜的个人网站</p>
    </body>
</html>
